<template>
	<div class="recipe">
		<!-- 选项卡 -->
		<el-tabs
			type="border-card"
			type-position="top"
			v-model="activeName"
			@tab-click="handleTabClick"
		>
			<el-tab-pane
				v-for="item in classifies"
				:key="item.parent_type"
				:label="item.parent_name"
				:name="item.parent_type"
			>
				<div class="repice-link">
					<router-link
						v-for="list in item.list"
						:to="{
							query: {
								...$route.query,
								classify: list.type,
								page: 1,
							},
						}"
						:key="list.type"
						:class="{ active: classifyType == list.type }"
						>{{ list.name }}</router-link
					>
				</div>
			</el-tab-pane>
		</el-tabs>
		<!-- 标题 -->
		<h2>家常好味道 给你家一般的温暖</h2>
		<!-- 侧边栏 -->
		<el-container direction="horizontal">
			<el-aside width="200px">
				<!-- 选项卡 -->
				<h3>筛选</h3>
				<el-collapse accordion v-model="propertiesActiveName">
					<el-collapse-item
						v-for="item in properties"
						:key="item.parent_type"
						:title="item.parent_name"
						:name="item.parent_type"
					>
						<div class="filter-tags">
							<el-tag
								type="info"
								v-for="option in item.list"
								:key="option.type"
								@click="handleSelectClick(option)"
								:class="{
									'selected-tag':
										option.type ===
										propertyTypes[item.title],
								}"
								>{{ option.name }}</el-tag
							>
						</div>
					</el-collapse-item>
				</el-collapse>
			</el-aside>
			<el-container direction="vertical" class="list-box">
				<el-main>
					<!-- 筛选后的结果 -->
					<template v-if="menuList.length == 0"
						>没有此类数据</template
					>
					<menu-card
						v-else
						:cardwidth="'186px'"
						:menuList="menuList"
					></menu-card>
				</el-main>
				<el-footer>
					<!-- 分页 -->
					<el-pagination
						layout="prev, pager, next,total"
						:total="pages.total"
						@current-change="handlePageSizeChange"
						background
					>
					</el-pagination>
				</el-footer>
			</el-container>
		</el-container>
	</div>
</template>

<script>
import MenuCard from '@/components/MenuCard.vue';
import { getClassify, getProperty, getMenus } from '@/api/menu';
export default {
	components: { MenuCard },
	data() {
		return {
			pages: {
				pageSize: 0, // 每页多少条
				total: 0, // 总条数
				currentPage: 0, // 当前页码
				totalPages: 0, // 总页数
			},
			classifies: [], // 菜谱分类
			classifyType: '1-1', // 菜谱分类下的详细类别 1-1 1-2 2-1
			activeName: '1', // 分类
			properties: [], // 属性分类
			propertiesActiveName: [], // 打开的面板
			propertyTypes: {}, // 记录属性分类 多个属性
			menuList: [],
			// params: {}, // 路由数据
		};
	},
	created() {
		getClassify().then((res) => {
			this.classifies = res.data;
			if (!this.$route.query.classify) {
				this.activeName = res.data[0].parent_type;
				this.classifyType = res.data[0].list[0].type;
				this.$router.push({
					query: { classify: this.classifyType, page: 1 },
				});
			}
		});
		getProperty().then((res) => {
			this.properties = res.data;
			// ?craft=1-1&flavor=2-1&hard=3-1&people=4-1&page=1
			const { query } = this.$route;
			this.properties.forEach((item) => {
				// craft 判断 query 中 craft 属性时候 有值 就去赋值 没有 为空字符串
				// craft 在properties 中每个元素的 title 值
				const key = item.title;
				if (query[key]) {
					this.propertyTypes[key] = query[key];
					this.propertiesActiveName.push(item.parent_type);
				}
			});
		});
	},
	watch: {
		$route: {
			handler() {
				const { classify } = this.$route.query;
				if (classify) {
					// 获取父级分类
					// this.activeName = classify.substr(0, 1);
					this.activeName = classify.split('-')[0];
					// 获取子级分类
					this.classifyType = classify;
					// 获取菜单数据
					this.getMenus();
				}
			},
			immediate: true, //是否立即执行
		},
	},
	methods: {
		handlePageSizeChange(e) {
			// this.$router.push({ query: { page: e } });
			this.pages.currentPage = e;
			this.$router.push({
				query: {
					...this.$route.query,
					page: this.pages.currentPage,
				},
			});
		},
		// 传参的格式
		/**
		 * {
		 * 		page:1,
		 *		classify:'1-1',
		 * 		property:{
		 * 			craft:'1-1',
		 * 			flavor:'2-1',
		 * 			hard:'3-1',
		 * 			people:'4-1',
		 * 		}
		 * }
		 */
		getMenus() {
			const query = { ...this.$route.query };
			const params = {
				page: query.page || 1,
				classify: query.classify,
				property: {},
			};
			delete query.page;
			delete query.classify;
			for (let key in query) {
				params.property[key] = query[key];
			}
			let loading = null; // 加载前先清空 加载状态
			// 获取数据前 显示加载中
			this.$nextTick(() => {
				loading = this.$loading({
					target: '.list-box', //在指定元素上添加加载效果
					lock: true,
					text: '加载中',
					background: 'rgba(0,0,0,0.5)',
				});
			});
			getMenus(params).then((res) => {
				// 存储数据
				this.menuList = res.data.list;
				// 存储分页信息
				this.pages.pageSize = res.data.page_size;
				this.pages.total = res.data.total;
				this.pages.totalPages = Math.ceil(
					res.data.total / res.data.page_size
				);
				// 获取到数据 关闭加载效果
				if (loading) {
					loading.close();
				}
			});
		},
		// 切换分类
		handleTabClick(tab, event) {
			// 当前分类
			const activeName = this.activeName;
			// 当前分类下的数据
			const item = this.classifies.find(
				(item) => item.parent_type == activeName
			);
			// 找到第一个子项
			this.classifyType = item.list[0].type;
			// 传递参数获取数据 实现路由跳转
			this.$router.push({
				query: {
					...this.$route.query,
					classify: this.classifyType,
					page: 1,
				},
			});
		},
		// 点击筛选
		handleSelectClick(option) {
			const title = option.title;
			const type = option.type;
			let query = { ...this.$route.query };
			// 判断是否存在此筛选 如果存在则在路由中删除当前属性
			if (this.propertyTypes[title] === type) {
				this.propertyTypes[title] = '';
				delete query[title]; //那个是设置的默认的
			} else {
				this.propertyTypes[title] = type;
				query[title] = type;
			}
			this.$router.push({
				query,
			});
		},
	},
};
</script>

<style lang='sass' scoped>
.recipe
	.border-card
	.repice-link
		a
			display: line-block
			font-size: 12px
			padding: 3px 10px
			line-height: 28px
		.active
			color: #fff
			background-color: #c90000
	h2
		text-align: center
		line-height: 3em
		font-weight: normal
	.el-aside
		padding: 20px
		background-color: #fff
		margin-right: 20px
		h3
			margin-bottom: 10px
		.filter-tags
			display: flex
			flex-wrap: wrap
			justify-content: space-between
			.el-tag
				min-width: 56px
				padding: 0 10px
				text-align: center
				margin-bottom: 10px
			.selected-tag
				background-color: #f00
				color: #fff
	.el-container

		.el-container
			// .el-main
			// 	width: 1200px
			.el-footer
				text-align: right
</style>